<template>
<div class="uploadwaper">
<a-upload name="file" :show-upload-list='{showPreviewIcon:true,showRemoveIcon:true}' :remove='removefile' @preview='previewFile' list-type="picture-card" class="avatar-uploader" :action="baseUrl+'/common/upload/uploadOssFile'" :before-upload="debforuploadEvt" @change="handleAvatarSuccess1">
    <!-- <div v-if="form3.file">
                                 <img  :src="form3.file" alt="avatar" />
                               </div> -->
    <!-- :previewFile='previewFile' -->
    <div v-if="!file">
        <a-icon :type="imgloading ? 'loading' : 'plus'" />
        <div class="ant-upload-text">
            Upload
        </div>
    </div>

</a-upload>
 <p class="ant-upload-hint">
      {{info}}
    </p>
 <a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible=false">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
</div>
</template>

<script>
var baseUrl=process.env.baseUrl
export default {
    components: {},
    props: {
        info:'',
        type:"",
        file: {
            type: String,
            default: function () {
                return ''
            }
        }
    },
    data() {
        return {
            baseUrl,
            currfile:'',
            previewVisible:false,
            imgloading:false,
            previewImage:'',
            fileList:[]
        };
    },
    watch: {},
    computed: {},
    methods: {
      debforuploadEvt (file) {
            var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
            if (!/\.(?:jpg|png|jpeg|gif)$/.test(file.name)) {
                // console.log('99999999999999')
                this.$message.warn('请选择jpg，png,jpeg,gif图片格式')
                return false

            }
        },
        uploadEvt (file) {
            var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
            if (!/\.(?:jpg|png|jpeg|gif)$/.test(file.name)) {
                // console.log('99999999999999')
                this.$message.warn('请选择jpg，png,jpeg,gif图片格式')
                return false

            }
        },
        async previewFile(file){
          this.previewImage=this.file
          this.previewVisible = true;
        },
        removefile(){
          //this.form3.currfile=''
          this.$emit('removefile',this.type)
        },
        handleAvatarSuccess1({file}){
          console.log(file)
            if (file.status=='done' && file.response) {
              try {
                if(file.response.code==200){
                  this.fileList=file
                  this.currfile=file.response.data[0].fileUrl;
                   this.$emit('handlesuccessfile',this.type,file.response.data[0].fileUrl)
                  this.$message.success('文件上传成功')
                }else{
                  this.$message.warn(file.respons.errmsg||'文件上传失败请联系管理员')
                }
              } catch (error) {
                this.$message.warn('文件上传失败请联系管理员')
              }

            }
        }
    },
    created() {},
    mounted() {}
};
</script>

<style lang="less" scoped>
.uploadwaper {
  // width: 300px;
  // height: 300px;
  line-height: 1;
  font-family:'Arial, Helvetica, sans-serif'
}
.ant-upload-hint{
  text-align: left;
  font-size: 12px;
  color: #999;
  margin: 0;
}
</style>
